// 当DOM加载完成后执行初始化操作
document.addEventListener('DOMContentLoaded', function() {
  // 初始化标签页切换功能
  initTabs();

  // 加载省份数据 (当前被注释掉)
  // loadProvinces();

  // 初始化省市区联动选择器 (当前被注释掉)
  // initAreaSelectors();

  // 加载已保存的地址列表到页面
  loadSavedAddresses();

  // 绑定保存地址按钮的点击事件处理函数
  document.getElementById('save-address').addEventListener('click', saveAddress);

  // 绑定重置地址按钮的点击事件处理函数
  document.getElementById('reset-addresses').addEventListener('click', resetAddresses);

  // 绑定读取网页地址按钮的点击事件处理函数
  document.getElementById('read-address').addEventListener('click', readAddress);
});

/**
 * 初始化标签页切换功能
 * 处理标签页点击事件，切换显示对应的内容区域
 */
function initTabs() {
  // 获取所有标签页和标签内容元素
  const tabs = document.querySelectorAll('.tab');
  const tabContents = document.querySelectorAll('.tab-content');

  // 为每个标签页添加点击事件监听器
  tabs.forEach(tab => {
    tab.addEventListener('click', function () {
      // 移除所有标签页和内容区域的active类
      tabs.forEach(t => t.classList.remove('active'));
      tabContents.forEach(content => content.classList.remove('active'));

      // 为当前点击的标签页添加active类
      this.classList.add('active');
      // 获取当前标签页的ID
      const tabId = this.getAttribute('data-tab');
      // 显示对应的标签内容
      document.getElementById(`${tabId}-tab`).classList.add('active');

      // 如果切换到管理标签页，重新加载地址列表
      if (tabId === 'manage') {
        loadSavedAddresses();
      }
    });
  });
}

/**
 * 初始化省市区联动选择器
 * 设置省份、城市、区县、街道之间的联动关系
 */
function initAreaSelectors() {
  // 获取省市区街道选择器元素
  const provinceSelect = document.getElementById('province');
  const citySelect = document.getElementById('city');
  const districtSelect = document.getElementById('district');
  const streetSelect = document.getElementById('street');

  // 省份选择变化时加载对应城市
  provinceSelect.addEventListener('change', function () {
    const provinceCode = this.value;
    if (provinceCode) {
      // 加载对应省份的城市
      loadCities(provinceCode);
      // 启用城市选择器
      citySelect.disabled = false;
      // 禁用区县选择器
      districtSelect.disabled = true;
      // 重置区县选择器
      districtSelect.innerHTML = '<option value="">请先选择城市</option>';
    } else {
      // 禁用城市和区县选择器
      citySelect.disabled = true;
      districtSelect.disabled = true;
      // 重置城市和区县选择器
      citySelect.innerHTML = '<option value="">请先选择省份</option>';
      districtSelect.innerHTML = '<option value="">请先选择城市</option>';
    }
  });

  // 城市选择变化时加载对应区县
  citySelect.addEventListener('change', function () {
    const cityCode = this.value;
    if (cityCode) {
      // 加载对应城市的区县
      loadDistricts(cityCode);
      // 启用区县选择器
      districtSelect.disabled = false;
    } else {
      // 禁用区县选择器
      districtSelect.disabled = true;
      // 重置区县选择器
      districtSelect.innerHTML = '<option value="">请先选择城市</option>';
    }
  });

  // 区县选择变化时加载对应街道
  districtSelect.addEventListener('change', function () {
    const districtCode = this.value;
    if (districtCode) {
      // 加载对应区县的街道
      loadStreets(districtCode);
      // 启用街道选择器
      streetSelect.disabled = false;
    } else {
      // 禁用街道选择器
      streetSelect.disabled = true;
      // 重置街道选择器
      streetSelect.innerHTML = '<option value="">请先选择区县</option>';
    }
  });

}

/**
 * 加载省份数据到下拉选择器
 * 注意：这里使用简化的省份数据，实际应用中可以使用完整的中国行政区划数据
 */
function loadProvinces() {
  // 定义省份数据数组，包含省份代码和名称
  const provinces = [
    { code: '1', name: '北京' },
    { code: '2', name: '上海' },
    { code: '3', name: '天津' },
    { code: '4', name: '重庆' },
    { code: '5', name: '河北' },
    { code: '6', name: '山西' },
    { code: '7', name: '河南' },
    { code: '8', name: '辽宁' },
    { code: '9', name: '吉林' },
    { code: '10', name: '黑龙江' },
    { code: '11', name: '内蒙古' },
    { code: '12', name: '江苏' },
    { code: '13', name: '山东' },
    { code: '14', name: '安徽' },
    { code: '15', name: '浙江' },
    { code: '16', name: '福建' },
    { code: '17', name: '湖北' },
    { code: '18', name: '湖南' },
    { code: '19', name: '广东' },
    { code: '20', name: '广西' },
    { code: '21', name: '江西' },
    { code: '22', name: '四川' },
    { code: '23', name: '海南' },
    { code: '24', name: '贵州' },
    { code: '25', name: '云南' },
    { code: '26', name: '西藏' },
    { code: '27', name: '陕西' },
    { code: '28', name: '甘肃' },
    { code: '29', name: '青海' },
    { code: '30', name: '宁夏' },
    { code: '31', name: '新疆' },
    { code: '32', name: '台湾' },
    { code: '84', name: '钓鱼岛' },
    { code: '52993', name: '港澳' },
  ];

  // 获取省份选择器元素
  const provinceSelect = document.getElementById('province');
  // 设置默认选项
  provinceSelect.innerHTML = '<option value="">请选择省份</option>';

  // 遍历省份数据，创建选项并添加到选择器
  provinces.forEach(province => {
    const option = document.createElement('option');
    option.value = province.code; // 设置选项值为省份代码
    option.textContent = province.name; // 设置选项文本为省份名称
    provinceSelect.appendChild(option); // 添加选项到选择器
  });
}

/**
 * 加载城市数据到下拉选择器
 * @param {string} provinceCode - 省份代码
 */
function loadCities(provinceCode) {
  // 实际应用中，这里应该根据省份代码从API或数据库获取对应的城市数据
  // 这里使用简化的示例数据
  const cities = getCitiesByProvince(provinceCode);

  // 获取城市选择器元素
  const citySelect = document.getElementById('city');
  // 设置默认选项
  citySelect.innerHTML = '<option value="">请选择城市</option>';

  // 遍历城市数据，创建选项并添加到选择器
  cities.forEach(city => {
    const option = document.createElement('option');
    option.value = city.code; // 设置选项值为城市代码
    option.textContent = city.name; // 设置选项文本为城市名称
    citySelect.appendChild(option); // 添加选项到选择器
  });
}

/**
 * 加载区县数据到下拉选择器
 * @param {string} cityCode - 城市代码
 */
function loadDistricts(cityCode) {
  // 实际应用中，这里应该根据城市代码从API或数据库获取对应的区县数据
  // 这里使用简化的示例数据
  const districts = getDistrictsByCity(cityCode);

  // 获取区县选择器元素
  const districtSelect = document.getElementById('district');
  // 设置默认选项
  districtSelect.innerHTML = '<option value="">请选择区/县</option>';

  // 遍历区县数据，创建选项并添加到选择器
  districts.forEach(district => {
    const option = document.createElement('option');
    option.value = district.code; // 设置选项值为区县代码
    option.textContent = district.name; // 设置选项文本为区县名称
    districtSelect.appendChild(option); // 添加选项到选择器
  });
}

/**
 * 根据省份代码获取城市数据
 * @param {string} provinceCode - 省份代码
 * @returns {Array} 城市数据数组，每个元素包含code和name属性
 * 注意：这里使用简化的示例数据，实际应用中应该从API或数据库获取
 */
function getCitiesByProvince(provinceCode) {
  // 这里应该返回实际的城市数据，这里仅提供示例
  const cityData = {
    '11': [ // 北京市
      { code: '1101', name: '朝阳区' }
    ],
    '44': [ // 广东省
      { code: '4401', name: '广州市' },
      { code: '4403', name: '深圳市' },
      { code: '4406', name: '佛山市' }
    ],
    '31': [ // 上海市
      { code: '3101', name: '上海市' }
    ]
  };

  // 如果找不到对应省份的城市数据，返回空数组
  return cityData[provinceCode] || [];
}

/**
 * 根据城市代码获取区县数据
 * @param {string} cityCode - 城市代码
 * @returns {Array} 区县数据数组，每个元素包含code和name属性
 * 注意：这里使用简化的示例数据，实际应用中应该从API或数据库获取
 */
function getDistrictsByCity(cityCode) {
  // 这里应该返回实际的区县数据，这里仅提供示例
  const districtData = {
    '1101': [ // 北京市
      { code: '110101', name: '东城区' },
      { code: '110102', name: '西城区' },
      { code: '110105', name: '朝阳区' },
      { code: '110106', name: '丰台区' },
      { code: '110108', name: '海淀区' }
    ],
    '4401': [ // 广州市
      { code: '440103', name: '荔湾区' },
      { code: '440104', name: '越秀区' },
      { code: '440105', name: '海珠区' },
      { code: '440106', name: '天河区' }
    ],
    '4403': [ // 深圳市
      { code: '440303', name: '罗湖区' },
      { code: '440304', name: '福田区' },
      { code: '440305', name: '南山区' },
      { code: '440306', name: '宝安区' }
    ]
  };

  // 如果找不到对应城市的区县数据，返回空数组
  return districtData[cityCode] || [];
}

/**
 * 保存地址信息到Chrome同步存储
 */
function saveAddress() {
  // 获取表单中的地址信息
  const addressName = document.getElementById('address-name').value.trim();
  const receiver = document.getElementById('receiver').value.trim();
  const phone = document.getElementById('phone').value.trim();
  const province = document.getElementById('province').value.trim();
  const city = document.getElementById('city').value.trim();
  const district = document.getElementById('district').value.trim();
  const street = document.getElementById('street').value.trim();
  const detailAddress = document.getElementById('detail-address').value.trim();
  const postcode = document.getElementById('postcode').value.trim();

  // 创建调试信息对象
  const info = {
    addressName: addressName,
    receiver: receiver,
    phone: phone,
    province: province,
    city: city,
    district: district,
    street: street,
    detailAddress: detailAddress,
    postcode: postcode,
  };

  // 记录调试日志
  debugLog('info','需保存地址信息', info);

  // 验证必填字段
  if (!addressName || !receiver || !phone || !province || !city || !street || !district || !detailAddress) {
    alert('请填写完整的地址信息');
    return;
  }

  // 创建地址对象
  const address = {
    id: Date.now().toString(), // 使用时间戳作为唯一ID
    name: addressName,
    receiver: receiver,
    phone: phone,
    province: province,
    city: city,
    district: district,
    street: street,
    detailAddress: detailAddress,
    postcode: postcode,
    fullAddress: `${province} ${city} ${district} ${street} ${detailAddress}` // 组合完整地址
  };

  // 从Chrome同步存储获取已保存的地址列表
  chrome.storage.sync.get(['addresses'], function (result) {
    // 如果没有地址列表，初始化为空数组
    const addresses = result.addresses || [];
    // 添加新地址到列表
    addresses.push(address);

    // 保存更新后的地址列表到Chrome同步存储
    chrome.storage.sync.set({ addresses: addresses }, function () {
      // 显示保存成功提示
      alert('地址保存成功！');
      // 清空表单
      clearAddressForm();

      // 切换到管理标签页
      document.querySelector('.tab[data-tab="manage"]').click();
    });
  });
}

/**
 * 清空地址表单中的所有字段
 */
function clearAddressForm() {
  // 清空地址名称字段
  document.getElementById('address-name').value = '';
  // 清空收件人字段
  document.getElementById('receiver').value = '';
  // 清空电话字段
  document.getElementById('phone').value = '';
  // 清空省份字段
  document.getElementById('province').value = '';
  // 重置城市选择器为初始状态
  document.getElementById('city').innerHTML = '<option value="">请先选择省份</option>';
  // 禁用城市选择器
  document.getElementById('city').disabled = true;
  // 重置区县选择器为初始状态
  document.getElementById('district').innerHTML = '<option value="">请先选择城市</option>';
  // 禁用区县选择器
  document.getElementById('district').disabled = true;
  // 清空详细地址字段
  document.getElementById('detail-address').value = '';
  // 清空邮政编码字段
  document.getElementById('postcode').value = '';
}

/**
 * 从Chrome同步存储加载已保存的地址并渲染到页面
 * 该函数负责获取存储的地址数据，并将其以列表形式展示在页面上
 * 同时为每个地址项绑定使用和删除按钮的事件处理函数
 */
function loadSavedAddresses() {
  // 获取地址列表容器元素
  const addressList = document.getElementById('address-list');
  // 清空地址列表内容，确保每次加载都是最新数据
  addressList.innerHTML = '';

  // 从Chrome同步存储获取地址列表数据
  chrome.storage.sync.get(['addresses'], function (result) {
    // 如果没有地址数据，初始化为空数组
    const addresses = result.addresses || [];

    // 如果没有保存的地址，显示提示信息
    if (addresses.length === 0) {
      addressList.innerHTML = '<p>暂无保存的地址</p>';
      return;
    }

    // 遍历地址列表，为每个地址创建DOM元素
    addresses.forEach(address => {
      // 创建地址项容器
      const addressItem = document.createElement('div');
      addressItem.className = 'address-item';
      // 设置地址项的HTML内容
      addressItem.innerHTML = `
        <div class="name">${address.name}</div>
        <div>${address.receiver} ${address.phone}</div>
        <div>${address.fullAddress}</div>
        ${address.postcode ? `<div>邮编: ${address.postcode}</div>` : ''}
        <div class="actions">
          <button class="use-btn" data-id="${address.id}">使用</button>
          <button class="delete-btn" data-id="${address.id}">删除</button>
        </div>
      `;

      // 将地址项添加到列表容器
      addressList.appendChild(addressItem);
    });

    // 绑定使用地址按钮事件
    document.querySelectorAll('.use-btn').forEach(button => {
      button.addEventListener('click', function () {
        const addressId = this.getAttribute('data-id');
        useAddress(addressId);
      });
    });

    // 绑定删除地址按钮事件
    document.querySelectorAll('.delete-btn').forEach(button => {
      button.addEventListener('click', function () {
        const addressId = this.getAttribute('data-id');
        deleteAddress(addressId);
      });
    });
  });
}

// 使用选中的地址
/**
 * 使用指定ID的地址填充到当前标签页的表单中
 * @param {string} addressId - 地址ID
 */
function useAddress(addressId) {
  // 从Chrome同步存储获取地址列表
  chrome.storage.sync.get(['addresses'], function (result) {
    // 如果没有地址数据，初始化为空数组
    const addresses = result.addresses || [];
    // 查找指定ID的地址
    const address = addresses.find(addr => addr.id === addressId);

    // 如果找到地址
    if (address) {
      console.log('准备发送地址信息:', address);

      // 向当前标签页发送消息，传递地址信息
      chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        // 检查是否获取到标签页
        if (tabs && tabs.length > 0) {
          // 发送消息到内容脚本，请求填充地址
          chrome.tabs.sendMessage(tabs[0].id, { action: 'fillAddress', address: address }, function (response) {
            console.log('收到content.js响应:', response);

            // 显示填写结果
            if (response && response.success) {
              showStatus('地址填写成功: ' + (response.details?.fieldsFilled?.join(', ') || ''), 'success');
            } else {
              showStatus('地址填写失败: ' + (response?.details?.fieldsNotFound?.join(', ') || '未找到匹配字段'), 'error');
            }
          });
        } else {
          showStatus('无法获取当前标签页信息', 'error');
        }
      });
    } else {
      showStatus('找不到选中的地址', 'error');
    }
  });
}

/**
 * 显示状态消息，并在3秒后自动隐藏
 * @param {string} message - 要显示的消息内容
 * @param {string} [type='info'] - 消息类型，可选值: 'info', 'success', 'error'，用于设置不同的样式
 */
function showStatus(message, type = 'info') {
  // 获取或创建状态消息元素
  const statusElement = document.getElementById('status-message') || createStatusElement();

  // 设置消息内容和类型样式
  statusElement.textContent = message;
  statusElement.className = `status-message ${type}`;
  statusElement.style.display = 'block';

  // 3秒后自动隐藏状态消息
  setTimeout(() => {
    statusElement.style.display = 'none';
  }, 3000);
}

/**
 * 创建状态消息元素并添加到文档中
 * @returns {HTMLDivElement} 创建的状态消息元素
 */
function createStatusElement() {
  // 创建状态消息元素
  const statusElement = document.createElement('div');
  // 设置元素ID
  statusElement.id = 'status-message';
  // 设置元素类名
  statusElement.className = 'status-message';

  // 创建样式元素
  const style = document.createElement('style');
  // 设置样式内容
  style.textContent = `
    .status-message {
      position: fixed;
      bottom: 10px;
      left: 10px;
      right: 10px;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 14px;
      z-index: 1000;
      display: none;
      text-align: center;
    }
    .status-message.success {
      background-color: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
    }
    .status-message.error {
      background-color: #f8d7da;
      color: #721c24;
      border: 1px solid #f5c6cb;
    }
    .status-message.info {
      background-color: #d1ecf1;
      color: #0c5460;
      border: 1px solid #bee5eb;
    }
  `;

  // 将样式添加到文档头部
  document.head.appendChild(style);
  // 将状态消息元素添加到文档体
  document.body.appendChild(statusElement);

  // 返回创建的状态消息元素
  return statusElement;
}

/**
 * 删除指定ID的地址
 * @param {string} addressId - 要删除的地址ID
 */
function deleteAddress(addressId) {
  // 显示确认对话框
  if (confirm('确定要删除这个地址吗？')) {
    // 从Chrome同步存储获取地址列表
    chrome.storage.sync.get(['addresses'], function (result) {
      // 如果没有地址数据，初始化为空数组
      const addresses = result.addresses || [];
      // 过滤掉指定ID的地址
      const updatedAddresses = addresses.filter(addr => addr.id !== addressId);

      // 将更新后的地址列表保存回Chrome同步存储
      chrome.storage.sync.set({ addresses: updatedAddresses }, function () {
        // 重新加载地址列表
        loadSavedAddresses();
      });
    });
  }
}

/**
 * 重置地址列表为默认测试地址
 * 此操作会删除所有现有地址
 */
function resetAddresses() {
  // 显示确认对话框
  if (confirm('确定要重置为默认测试地址吗？这将删除所有现有地址！')) {
    // 向background.js发送重置地址的消息
    chrome.runtime.sendMessage({ action: 'resetAddresses' }, function (response) {
      // 处理响应
      if (response && response.success) {
        showStatus('地址已重置为默认测试地址', 'success');
      } else {
        showStatus('重置地址失败', 'error');
      }
      // 重新加载地址列表
      loadSavedAddresses();
    });
  }
}


/**
 * 从当前标签页读取已填写的地址信息并填充到表单中
 */
function readAddress() {
  // 获取当前活动标签页
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {

    // 检查是否获取到标签页
    if (tabs && tabs.length > 0) {
      // 向当前标签页发送读取地址的消息
      chrome.tabs.sendMessage(tabs[0].id, { action: 'readAddress' }, function (response) {

        // 记录响应日志
        debugLog('info', '收到content.js响应:', response);

        // 提取响应数据
        const res = response.response;

        // 处理可能的错误
        if (chrome.runtime.lastError) {
          debugLog('error', '读取地址失败:', chrome.runtime.lastError);
          showStatus('读取地址失败，请确保在京东订单页面', 'error');
          return;
        }

        // 检查是否成功读取到地址
        debugLog('info', "填充表单判断:", res.success);
        if (res.success) {
          debugLog('info', "开始填充内容:", null);
          // 填充表单字段
          document.getElementById('address-name').value = 'ID' + Date.now().toString(),
            document.getElementById('receiver').value = res.addressInfo.name || '';
          document.getElementById('phone').value = res.addressInfo.phone || '';
          document.getElementById('province').value = res.addressInfo.province || '';
          document.getElementById('city').value = res.addressInfo.city || '';
          document.getElementById('district').value = res.addressInfo.district || '';
          document.getElementById('street').value = res.addressInfo.street || '';
          document.getElementById('detail-address').value = res.addressInfo.address || '';
          document.getElementById('postcode').value = res.addressInfo.zipcode || '';

          // 显示成功状态
          showStatus('地址读取成功', 'success');
        } else {
          // 显示失败状态
          showStatus('未能读取到地址信息', 'error');
        }
      });
    } else {
      // 无法获取标签页时显示错误
      showStatus('无法获取当前标签页信息', 'error');
    }
  });
}

/**
 * 创建调试日志并发送到background.js
 * @param {string} type - 日志类型，如'info', 'error', 'warning'等
 * @param {string} message - 日志消息内容
 * @param {any} [data=null] - 附加数据，可选
 */
function debugLog(type, message, data = null) {
  // 同时保留console.log输出，方便在页面控制台查看
  // console.log(`%c${message}`, `color: ${getColorForType(type)}; font-weight: bold`, data);

  // 发送到background.js以便在devtools中查看
  chrome.runtime.sendMessage({
    action: 'contentDebugLog',
    logType: type,
    message: message,
    data: data
  });
}
